<template>
  <view @click.stop>
    <!-- #ifdef MP-WEIXIN -->
    <view class="foot-bottom" v-if="!isScroll"></view>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <view class="foot-bottom"></view>
    <!-- #endif -->
    <view
      class="foot-tavbar-container d-a-c"
      :style="'background:' + detail.backgroundColor || '' + ';'"
    >
      <template v-for="(item, index) in detail.list" :key="index">
        <view
          v-if="
            (item.text == '商户' && item.isShow) ||
            (item.text != '商户' && true)
          "
        >
          <view
            class="item d-c-c"
            :class="{ active: item.linkUrl == getRoute() }"
            @click="tabBarFunc(item)"
          >
            <view style="height: 0; width: 0; opacity: 0">{{
              getRoute()
            }}</view>
            <view class="inner d-c-c d-c">
              <image
                v-if="detail.type != 2"
                :src="
                  item.linkUrl == getRoute()
                    ? item.selectedIconPath
                    : item.iconPath
                "
                mode="aspectFill"
              >
              </image>
              <template v-if="detail.type != 1">
                <text
                  :style="
                    item.linkUrl == getRoute()
                      ? 'color:' + detail.textHoverColor + ';'
                      : 'color:' + detail.textColor + ';'
                  "
                  class="text-name"
                  >{{ item.text }}</text
                >
              </template>
            </view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      /*当前选中*/
      activeTabber: "首页",
      /*打开直播菜单*/
      open_liveMenu: false,
      /*底部菜单*/
      detail: {
        list: [],
      },
      hasTab: false,
    };
  },
  props: {
    isScroll: {
      default: false,
    },
  },
  created() {
    let pages = getCurrentPages();
    if (pages.length) {
      let currentPage = pages[pages.length - 1];
      if (currentPage.route == "pages/index/index") {
        this.$store.commit("changefootTab", "首页");
      }
    }
    this.getData();
  },
  methods: {
    getNav() {
      let theme = this.$store.state.theme;
      let data = {
        backgroundColor: "#FFFFFF",
        isAuto: "0",
        textColor: "#000000",
        textHoverColor: this.getThemeColor(),
        type: "0",
        list: [
          {
            iconPath: "/static/tabbar/home.png",
            linkUrl: "/pages/index/index",
            selectedIconPath: `/static/tabbar/home_${theme}.png`,
            text: "首页",
          },
          {
            iconPath: "/static/tabbar/category.png",
            linkUrl: "/pages/product/category",
            selectedIconPath: `/static/tabbar/category_${theme}.png`,
            text: "分类",
          },
          {
            iconPath: "/static/tabbar/shop.png",
            isShow: true,
            linkUrl: "/pages/shop/shopList",
            selectedIconPath: `/static/tabbar/shop_${theme}.png`,
            text: "商户",
          },
          {
            iconPath: "/static/tabbar/cart.png",
            isShow: true,
            linkUrl: "/pages/cart/cart",
            selectedIconPath: `/static/tabbar/cart_${theme}.png`,
            text: "购物车",
          },
          {
            iconPath: "/static/tabbar/user.png",
            isShow: true,
            linkUrl: "/pages/user/index/index",
            selectedIconPath: `/static/tabbar/user_${theme}.png`,
            text: "我的",
          },
        ],
      };
      this.detail = data;
      console.log("isAuto:2");
      uni.setStorageSync("TabBar", data);
    },
    // hasmenu() {
    // 	let self = this;
    // 	let curRoute = self.getRoute();
    // 	let res = self.detail.list.some(item => {
    // 		if (item.linkUrl == curRoute) {
    // 			return true
    // 		}
    // 	})
    // 	self.hasTab = res;
    // 	if (uni.getStorageSync('TabBar').isAuto && uni.getStorageSync('TabBar').isAuto != 0) {
    // 		uni.hideTabBar()
    // 	}
    // },
    getRoute() {
      let self = this;
      let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
      let curRoute = "/" + routes[routes.length - 1].route; //获取当前页面路由
      if (
        curRoute == "/pages/diy-page/diy-page" ||
        curRoute == "/pages/article/detail/detail"
      ) {
        if (routes[routes.length - 1]["$page"]) {
          curRoute = routes[routes.length - 1]["$page"].fullPath;
        }
      }
      return curRoute;
    },
    /*点击菜单*/
    tabBarFunc(e) {
      if (this.footTabberData.active == e.text) {
        return;
      }
      this.$store.commit("changefootTab", e.text);
      this.gotoPage(e.linkUrl);
    },
    /*获取首页分类*/
    getData() {
      let self = this;
      self._get("index/nav", {}, function (res) {
        self.detail = res.data.nav;
        if (!self.detail || self.detail.isAuto == 0) {
          self.getNav();
        } else {
          console.log("isAuto:1");
          uni.setStorageSync("TabBar", self.detail);
        }
        // this.hasmenu();
        // self.hasmenu();
      });
    },
  },
};
</script>

<style lang="scss">
$footer-tabBar-height: 50px;
.foot-bottom {
  width: 100%;
  height: $footer-tabBar-height;
  padding-bottom: env(safe-area-inset-bottom);
}

.foot-tavbar-container {
  box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.3);
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: $footer-tabBar-height;
  background: #ffffff;
  z-index: 90;
  padding-bottom: env(safe-area-inset-bottom);
}

.foot-tavbar-container .item {
  flex: 1;
  height: $footer-tabBar-height;
}

.foot-tavbar-container .item.add-btn .inner {
  margin-bottom: 70rpx;
  width: 100rpx;
  height: $footer-tabBar-height;
  border-radius: 50%;
  background: $dominant-color;
  box-shadow: 0 0 10rpx 0 rgba(232, 38, 100, 0.6);
}

.foot-tavbar-container image {
  width: 50rpx;
  height: 50rpx;
}

.foot-tavbar-container .text-name {
  font-size: 24rpx;
  color: #666666;
}

.foot-tavbar-container .item.active .text-name {
  color: #f8c341;
}
</style>
